
<template>
   <div id="hello">把v</div>

</template>

<script setup lang="ts">
import {watchEffect, ref,onBeforeMount,onMounted } from 'vue'
// 创建之前
onBeforeMount(()=>{
  let div = document.querySelector('#hello')
  console.log('创建之前onBeforeMount',div) //null
})
// 创建之后
onMounted(()=>{
  let div = document.querySelector('#hello')
  console.log('创建之后onMounted',div) // <div id="hello">把v</div>
})
// 数据更新时 发生在虚拟 DOM 打补丁之前
onBeforeUpdate(()=>{
 

})
//DOM更新后，updated的方法即会调用
onUpdated(()=>{

})
// 卸载组件实例之前调用,在这个阶段，实例仍然是完全正常的
onBeforeUnmount(()=>{

})
// 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载
onUnmounted(()=>{

})
</script>


<style>

</style>
